<template>
  <div
    class="comment"
    :id="`comment${comment.id}`"
  >
    <div class="comment-head">
      <div class="user-avatar"><img
          :src="comment.fromUserAvatar"
          alt=""
        ></div>
      <div class="head-right">
        <section-title>
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <div>
              <span class="from-user user-name">{{comment.fromUserName}}</span>
              <span
                class="to-user"
                v-if="comment.toUserId"
              ><span style="margin: 0 5px;">@</span><span class="user-name">{{comment.toUserName}}</span></span>
            </div>
            <div style="font-size: 13px;">
              <span style="color: #9c9c9c;margin-right: 20px;">{{comment.createTime | parseTime}}</span>
              <span
                @click.stop="showCommentEditor=true"
                style="cursor: pointer;"
              >回复</span>
            </div>
          </div>
        </section-title>
      </div>
    </div>
    <div class="comment-body">
      <div
        class="content-text"
        v-html="comment.comment"
      >
      </div>
      <div
        v-if="showCommentEditor"
        @click.stop=""
      >
        <comment-message-editor
          :inline="true"
          buttonText="回复"
          @submit="submitComment"
        ></comment-message-editor>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import sectionTitle from "@/components/section-title";
import commentMessageEditor from "comment-message-editor";
import { isEmpty } from "../utils/index";
import { submitReply, getCodeImg } from "../api/index";
export default {
  name: "comment",
  props: {
    comment: {
      type: Object
    }
  },
  data() {
    return {
      codeUrl: "",
      showCommentEditor: false,
      reply1: {
        id: "",
        comment: "",
        fromUserAvatar: "https://s1.ax1x.com/2020/07/07/UkN9zt.jpg",
        fromUserId: "123",
        fromUserName: "Rorschach",
        parentId: isEmpty(this.comment.parentId)
          ? this.comment.id
          : this.comment.parentId,
        postId: this.comment.postId,
        toUserAvatar: this.comment.fromUserAvatar,
        toUserId: this.comment.fromUserId,
        toUserName: this.comment.fromUserName,
        uuid: "",
        code:''
      }
    };
  },
  watch: {
    showCommentEditor(value) {
      if (value) {
        document.body.addEventListener("click", this.close);
        this.getCode();
      } else {
        document.body.removeEventListener("click", this.close);
      }
    }
  },
  components: {
    sectionTitle,
    commentMessageEditor
  },
  methods: {
    reply(id) {
      const ref = `comment${id}`;
    },
    submitComment(v) {
      this.reply1.comment = v;
      submitReply(this.reply1).then(res => {
        this.$notify({
          title: "成功",
          message: "评论成功",
          type: "success"
        });
        this.reply1.id = res.data;
        this.freshComment(this.reply1);
      });
      this.showCommentEditor = false;
    },
    close() {
      this.showCommentEditor = false;
    },
    // 调用父组件的方法，刷新评论
    freshComment(obj) {
      if (isEmpty(this.comment.parentId)) {
        this.$parent.getComment();
      } else {
        this.$parent.$parent.getComment();
      }
    },
    getCode() {
      getCodeImg().then(res => {
        // this.codeUrl = "data:image/gif;base64," + res.data.captcha;
        this.codeUrl = res.data.captcha;
        this.reply1.uuid = res.data.uuid;
      });
    }
  }
};
</script>

<style scoped lang="less">
.comment {
  margin: 20px 0;
}
.comment-head {
  display: flex;
  .head-right {
    flex: 1;
  }
  .user-name {
    color: #8fd0cc;
  }
}
.comment-body {
  padding-left: 80px;
  .content-text {
    /*padding-bottom: 30px;*/
    margin-bottom: 30px;
    font-size: 14px;
    color: #9c9c9c;
    line-height: 1.3rem;
  }
}
.user-avatar {
  width: 50px;
  height: 50px;
  margin-right: 30px;
  img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
  }
}
@media (max-width: 600px) {
  .comment-body {
    padding-left: 15px;
    .content-text {
      margin-top: 10px;
    }
  }
  .user-avatar {
    margin-right: 10px;
  }
}
</style>
